import { Component } from 'react';
import PropTypes from 'prop-types';
import Editor from './Editor';

import './SimpleTextEditor.less';

export default class SimpleTextEditor extends Component {
    static defaultProps = {
        content: '',
        desc: '',
        limit: '',
        placeHolder: '',
    };

    constructor(props) {
        super(props);
        this.handleEditorChange = this._handleEditorChange.bind(this);
        this.handleSave = this._handleSave.bind(this);
        this.handleCancel = this._handleCancel.bind(this);
    }

    state = {
        content: this.props.content,
    };

    componentDidMount() {
        $(window).scrollTop(0);
    }

    // componentDidMount() {
    //     this.state.$J_Page = $("#J_Page .curPage");
    //     WPT.$curPage.on("focus", ".textEdit_textarea", () => {
    //         var textareaHeight = $(window).height() - WPT.$curPage.find(".topBox").height() - WPT.$curPage.find(".txtNum").height();
    //         $(this.refs.textarea).height(textareaHeight);
    //         this.state.$J_Page.children().css({overflow: 'hidden',height: $(window).height()});
    //         this.moveEnd($(this.refs.textarea));
    //         setTimeout(function(){
    //             $("body").scrollTop(0);
    //         }, 50);
    //     });
    // }
    // componentDidUpdate() {
    //     if(!this.state.isHide){
    //         $(this.refs.textarea).focus();
    //     }
    // }
    // componentWillUnmount() {
    //     this.state.$J_Page.children().css({overflow: 'inherit', height: 'inherit'});
    //     WPT.$curPage.off("focus", ".textEdit_textarea");
    // }

    // show(value, callback, placeholder, desc, limitCount) {
    //     this.setState({
    //         isHide: false,
    //         value,
    //         desc,
    //         placeholder,
    //         limitCount: limitCount || 0,
    //         callback,
    //         scrollTop: $(window).scrollTop(),
    //     });
    // }

    _handleSave() {
        const { state, props } = this;
        props.onSave && props.onSave(state.content);
    }

    _handleCancel() {
        this.props.onCancel && this.props.onCancel();
    }

    // moveEnd(obj) {
    //     if(obj.length){
    //         obj = obj[0];
    //         //obj.focus();
    //         var len = obj.value.length;
    //         if (document.selection) {
    //             var sel = obj.createTextRange();
    //             sel.moveStart('character', len);
    //             sel.collapse();
    //             sel.select();
    //         } else if (typeof obj.selectionStart == 'number'
    //             && typeof obj.selectionEnd == 'number') {
    //             obj.selectionStart = obj.selectionEnd = len;
    //         }
    //     }
    // }
    _handleEditorChange(content) {
        this.setState({ content });
    }

    check() {
        // var limit = parseInt(this.state.limitCount);
        // var textarea = this.refs.textarea;
        // if (textarea.value.length > limit){
        //     textarea.value = textarea.value.substring(0, limit);
        // }
        // WPT.$curPage.find(".txtNum").html(textarea.value.length + " / " + limit);
    }

    render() {
        const { props, state } = this;
        const position = /android/i.test(window.navigator.userAgent) ? { position: 'fixed' } : {};
        return (
            <div className="modules_textEdit" style={position}>
                <div className="topBox">
                    <div className="head">
                        <div className="fl cancel" {...WPT.onTouchEnd(this.handleCancel)}>
                            取消
                        </div>
                        <div className="fr save" {...WPT.onTouchEnd(this.handleSave)}>
                            保存
                        </div>
                    </div>
                    <div className={`desc ${props.desc && 'fullDesc'}`}>{props.desc}</div>
                </div>
                {!!props.limit && (
                    <div className="txtNum">
                        {state.content.length}
                        {' '}
/
                        {props.limit}
                    </div>
                )}
                <Editor onChange={this.handleEditorChange} content={this.props.content} />
            </div>
        );
    }
}

SimpleTextEditor.propTypes = {
    onSave: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    content: PropTypes.string,
    desc: PropTypes.string,
    placeHolder: PropTypes.string,
    limit: PropTypes.number,
};
